<template>
    <div class="app-container">
        <el-row :gutter="10" class="mb8">
          <!-- <el-col :span="1.5">
             <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['contact:add']">新增</el-button>
          </el-col>
          <el-col :span="1.5">
             <el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate"
                v-hasPermi="['contact:edit']">修改</el-button>
          </el-col>
          <el-col :span="1.5">
             <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete"
                v-hasPermi="['contact:remove']">删除</el-button>
          </el-col> -->
          <el-col :span="1.5">
            <el-button
               type="info"
               plain
               icon="Sort"
               @click="toggleExpandAll"
            >展开/折叠</el-button>
         </el-col>
          <right-toolbar v-model:showSearch="showSearch" @queryTable="getRefreshPage"></right-toolbar>
       </el-row>
       <!-- 表格数据 -->
       <el-table v-loading="loading" :data="roleList"   row-key="areaCode"
       v-if="refreshTable"
       :default-expand-all="isExpandAll" :tree-props="{ children: 'areaList', hasChildren: 'hasChildren' }">
          <el-table-column label="区域名称" align="center" prop="name" :show-overflow-tooltip="true" />
          <el-table-column label="删除标志" align="center" prop="delFlag" :show-overflow-tooltip="true" >
            <template #default="scope">
                <div v-if="scope.row.delFlag==0">存在</div>
                <div v-else>已删除</div>
            </template>
          </el-table-column>
          <el-table-column label="状态" align="center" prop="isUsed" :show-overflow-tooltip="true" >
            <template #default="scope">
               <el-switch v-model="scope.row.isUsed" :active-value="'1'" :inactive-value="'0'" v-hasPermi="['area:role:changeStatus']"
               @change="handleStatusChange(scope.row)"></el-switch>
            </template>
        </el-table-column>
          <el-table-column label="创建时间" align="center" prop="createTime" width="150">
             <template #default="scope">
                <span>{{ parseTime(scope.row.createTime) }}</span>
             </template>
          </el-table-column>
       
       </el-table>
       <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
          v-model:limit="queryParams.pageSize" @pagination="getList" />
    
    </div>
 </template>
 
 <script setup name="area">
  import {pageArea,refreshArea,treeArea,updateUsed} from '@/api/area.js'

 const router = useRouter();
 const { proxy } = getCurrentInstance();
 const { sys_warning_type,sys_warning_level,sys_warning_way,sys_warning_status } = proxy.useDict("sys_warning_type","sys_warning_level","sys_warning_way","sys_warning_status");
 const options = ref([])
 const roleList = ref([]);
 const open = ref(false);
 const loading = ref(true);
 const showSearch = ref(true);
 const ids = ref([]);
 const single = ref(true);
 const multiple = ref(true);
 const total = ref(0);
 const dateRange = ref([]);
 const deptOptions = ref(undefined);
 const menuRef = ref(null);
 const title = ref()
//人员
const idOptions = ref([])
const isExpandAll = ref(false);
const refreshTable = ref(true);
/** 展开/折叠操作 */
function toggleExpandAll() {
  refreshTable.value = false;
  isExpandAll.value = !isExpandAll.value;
  nextTick(() => {
    refreshTable.value = true;
  });
}

function handleStatusChange(row) {
   let text = row.isUsed == 1 ? "启用" : "停用";
   proxy.$modal.confirm('确认要' + text +'该区域吗?').then(function () {
      return updateUsed(row.areaCode);
   }).then(() => {
      proxy.$modal.msgSuccess(text + "成功");
   }).catch(function () {
      row.isUsed = row.isUsed == '0' ? '1' : '0';
   });
}
function getRefreshPage() {
    loading.value = true;
    if (dateRange.value && dateRange.value.length > 0) {
       queryParams.value.createTimeStart = dateRange.value[0]
       queryParams.value.createTimeEnd = dateRange.value[1]
    } else {
       queryParams.value.createTimeStart = undefined
       queryParams.value.createTimeEnd = undefined
    }
    refreshArea().then(response => {
      treeArea(proxy.addDateRange(queryParams.value)).then(response => {
      normalizeTree(response?.data)
       roleList.value = response?.data;
       loading.value = false;
       });
    });
 }
 const data = reactive({
    form: {},
    queryParams: {
      //  pageNum: 1,
      //  pageSize: 10,
    },
 });

 const { queryParams, form, rules } = toRefs(data);
 function normalizeTree(root) {
  if (root == null) return;

  // 确保 children 存在且为数组
  if (!('areaList' in root) || !Array.isArray(root.areaList)) {
    root.areaList = [];
  }
  // 递归处理子节点
  root.areaList.forEach(normalizeTree);
}
 function getList() {
    loading.value = true;
    if (dateRange.value && dateRange.value.length > 0) {
       queryParams.value.createTimeStart = dateRange.value[0]
       queryParams.value.createTimeEnd = dateRange.value[1]
    } else {
       queryParams.value.createTimeStart = undefined
       queryParams.value.createTimeEnd = undefined
    }
    treeArea(proxy.addDateRange(queryParams.value)).then(response => {
      normalizeTree(response?.data)
       roleList.value = response?.data;
       loading.value = false;
    });
 }
 
 /** 搜索按钮操作 */
 function handleQuery() {
    queryParams.value.pageNum = 1;
    getList();
 }
 
 
 getList();
 </script>
 